<template>
  <div class="xiazhu_div1">
    <!-- 组件 -->
    <!-- 0-9生肖 -->
    <ul class="zhenghe_ul2">
      <li
        class="zhenghe_li_qiu"
        v-for="(item,index) in list"
        :key="index"
        :class="{active:matchClass(index)}"
        @click="changeMatch(index)"
      >
        <b>{{item.shuzi}}</b>
        <p>{{$store.state.bonus_odd.wuzhongyi}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "wanfa",
  data() {
    return {
      //  动物图片
      list: [
        {
          id: "0",
          shuzi: "0"
        },
        {
          id: "1",
          shuzi: "1"
        },
        {
          id: "2",
          shuzi: "2"
        },
        {
          id: "3",
          shuzi: "3"
        },
        {
          id: "4",
          shuzi: "4"
        },
        {
          id: "5",
          shuzi: "5"
        },
        {
          id: "6",
          shuzi: "6"
        },
        {
          id: "7",
          shuzi: "7"
        },
        {
          id: "8",
          shuzi: "8"
        },
        {
          id: "9",
          shuzi: "9"
        }
      ],
      activeIndex: [], //此时要改变颜色的动物 下标 所有选中的数据 都在里面
      isred: null,
      activeIndex2: [] //这是单双大小
    };
  },
  methods: {
    clear() {
      this.activeIndex = [];
    },
    //   点击0-9图片匹配 includes选中的数据 有该项下标时 返回true 没有返回false
    matchClass(index) {
      return this.activeIndex.includes(index);
    },
    //  单独点击下面动物改变
    changeMatch(index) {
      // 声明一个这个数组中有没有这个下标
      let bol = this.activeIndex.includes(index);
      if (bol) {
        // 若是选中这个，则删除一个这个index
        this.activeIndex.splice(this.activeIndex.indexOf(index), 1);
      } else {
        // 若是没有，则添加这个下标
        this.activeIndex.push(index);
      }
      this.$emit("getActiveData", this.activeIndex);
    },
    //点击大小单双
    matchClass2(index) {
      return this.activeIndex2.includes(index);
    },
    changeMatch2(index) {
      // 声明一个这个数组中有没有这个下标
      let bol = this.activeIndex2.includes(index);
      if (bol) {
        // 若是选中这个，则删除一个这个index
        this.activeIndex2.splice(this.activeIndex2.indexOf(index), 1);
      } else {
        // 若是没有，则添加这个下标
        this.activeIndex2.push(index);
      }
      this.$emit("getActiveData", this.activeIndex2);
    }
  }
};
</script>

<style scoped="scoped">
.xuanze_xiazhu_ul .xuanze_xiazhu_li.red {
  background: #d21d17;
  color: #fff;
  border: none;
}

.xiazhu_chakan_ul .xiazhu_chakan_li.active {
  background: #d21d17 !important;
}

.zhenghe_ul2 .zhenghe_li_qiu.active {
  background: #d21d17;
}

.zhenghe_danshuang .zhenghe_span.active {
  background: #d21d17;
}
</style>
